<template>
  <view class="padding-30 bg-white ">
    <view class="tab-box flex-row align-end">
      <view
        v-for="(item,index) in tabs"
        :key="index"
        class="tab-item flex-item flex-column justify-between"
        :class="{active:index === activeInx}"
        :style="{'margin-left':index ? '30rpx' : 0}"
        @click="change(index)"
      >
        <text class="tab-text text-24" :class="['color-' + (index === activeInx ? 'primary' : 't1')]">{{ item.title }}</text>
        <text class="tab-text text-48 text-bold" :class="['color-' + (index === activeInx ? 'primary' : 't1')]">{{ item.size }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DriverTab',
  props: {
    tabs: {
      type: Array,
      default: () => []
    },
    activeInx: {
      type: Number,
      default: 0
    }
  },
  methods: {
    change(inx) {
      this.$emit('update:activeInx', inx)
      this.$emit('change', inx)
    }
  }
}
</script>

<style scoped lang="scss">
.tab-box{
  height:160rpx;
}
.tab-item{
  padding:24rpx;
  height: 144rpx;
  background-color: rgba(43, 48, 55, 0.1);
  border-radius: 20rpx;
  border: 2rpx solid $color-secondary;
  transition-property: height, background-color;
  transition-duration:0.3s;
  transition-timing-function:linear;
}
.tab-text{
  transition:color .3s linear;
}
.active{
  height:160rpx;
  background-color:$color-secondary;
}
</style>
